<template>
  <div class="box">
    <div class="headers">
      <h1>订单状态: {{isorderStatus[from.orderStatus]}}</h1>
      <el-button round @click="handleLogistics">查看物流详情</el-button>
    </div>
    <!-- 订单信息 -->
    <h1 class="detailtitle">订单信息</h1>
    <div class="detail">
      <div>
        <h3>交易信息</h3>
        <p>订单编号: {{from.orderCode}} <span @click="copy(from.orderCode)">复制</span></p>
        <p>下单时间: {{parseTime(from.addTime)}}</p>
        <p>支付时间: {{parseTime(from.payTime)}}</p>
        <p>最新发货时间: {{parseTime(from.logisticTime)}}</p>
        <p>收货确认时间: {{parseTime(from.confirmTime)}}</p>
        <p>用户取货时间: {{parseTime(from.qhTime)}}</p>
      </div>
      <div>
        <h3>买家信息</h3>
        <p>昵称: {{from.addTime}}</p>
        <p>手机号: {{from.addTime}}</p>
      </div>
      <div>
        <h3>物流信息</h3>
        <p>收货地址: {{address.name}}, {{address.phone}}, {{address.provinceName}}{{address.districtName}}{{address.address}}</p>
        <p>运送方式: 快递</p>
        <p>物流公司名称: {{logistic.name}}</p>
        <p>运单号: {{logistic.num}}</p>
      </div>
    </div>
    <!-- 商品信息 -->
    <div>
       <el-table :data="from.goods ?? []" border style="width: 100%">
          <el-table-column prop="img" label="" align="center">
             <template v-slot="scope">
                <img style="width:100px;height:100px;border-radius:20px" :src="scope.row.img" alt="">
             </template>
          </el-table-column>
          <el-table-column prop="goodsName" label="名称" align="center" />
          <el-table-column prop="" label="规格" align="center">
             <template v-slot="scope">
                <div>
                  {{scope.row.attrName}} ; {{scope.row.sizeName}}
                </div>
             </template>
          </el-table-column>
          <el-table-column prop="price" label="单价" align="center" />
          <el-table-column prop="goodsNum" label="数量" align="center" />
        </el-table>
    </div>
    <!-- 汇总 -->
    <div class="huizong">
      <div></div>
      <div class="allprice">
        <p><span>商品总价:</span> <span>￥{{from.goodsAmount}}</span></p>
        <p><span>运费:</span> <span>￥{{from.freightPrice}}</span></p>
        <p><span>订单原价:</span> <span>￥{{from.totalAmount}}</span></p>
        <p><span>会员折扣:</span> <span>￥{{from.deduction}}</span></p>
        <p><span>代金券金额:</span> <span>￥{{from.balancePrice}}</span></p>
        <p><span>付款金额:</span> <span class="price">￥{{from.payPrice}}</span></p>
      </div>
    </div>
    <div class="btnclass">
      <div>
        <el-button class="btn" type="primary" @click="back" plain>返回</el-button>
      </div>

    </div>
    <!-- 物流弹窗 -->
    <el-dialog title="物流信息" :visible.sync="logisticsopen" width="800px" v-dialogDrag append-to-body>
      <div>
        <div style="font-size:18px;display:flex;justify-content: space-between;margin-bottom:20px;">
          <span>物流公司：{{logisticsform.com}}</span>
          <span>物流编号：{{logisticsform.nu}}</span>
        </div>
        <el-steps direction="vertical" :active="1">
          <el-step v-for="(item,index) in logisticsform.data" :key="index+'a'" :title="item.ftime" :description="item.context"></el-step>
        </el-steps>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { createOrder, updateOrder, deleteOrder, getOrder, getOrderPage, exportOrderExcel } from "@/api/qd/order";
export default {
  data(){
    return{
      from:{},
      address:{},
      logistic:{},
      isorderStatus:{1: '待支付', 2:'待发货' ,3: '待收货' ,4: '已完成' ,5:'退款售后'},
      // 物流弹窗
      logisticsform:{},
      logisticsopen:false
    }
  },
  created(){
    this.getList()
  },
  methods:{
    getList(){
      getOrder(this.$route.query.id).then(res=>{
        // this.$set(this,'from',res.data ?? {})
        this.from = res.data ?? {}
        this.address = res.data.address ?? {}
        this.logistic = res.data.logistic ?? {}
      })
    },
    copy(text){ // 复制
        if (navigator.clipboard && window.isSecureContext) {
          navigator.clipboard.writeText(text).then(() => {
            this.$message.success('复制成功！！')
          }).catch((err) => {
            this.copyErrorIng(text)
          });
        } else {
          this.copyErrorIng(text)
        }
    },
    copyErrorIng(text){  // copy方法无法执行时执行该代码
      // 创建text area
        let textArea = document.createElement("textarea");
        textArea.value = text;
        // 使text area不在viewport，同时设置不可见
        textArea.style.position = "absolute";
        textArea.style.opacity = 0;
        textArea.style.left = "-999999px";
        textArea.style.top = "-999999px";
        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();
        return new Promise((res, rej) => {
          // 执行复制命令并移除文本框
          document.execCommand('copy') ? res() : rej();
          textArea.remove();
          this.$message({
            message: "复制成功",
            type: "success"
          });
        });
    },
    handleLogistics(){ // 查看物流按钮
      this.$axios({url:'/qd/order/findLogistics?id='+this.from.id,method:'get'}).then(res=>{

        this.logisticsform = res.data ?? {}
        this.logisticsopen = true
      })
    },
    back(){ // 返回
      this.$router.back()
    }
  }
}
</script>

<style lang="scss" scoped>
.box{
  padding: 10px;
  .headers{
    background-color: rgb(247, 248, 250);
    border-radius: 10px;
    padding: 20px;
    h1{
      font-weight: 800;
      font-size: 26px;
    }
  }
  .detailtitle{
    font-weight: 700;
    position: relative;
    margin-top: 20px;
    display: inline-block;
    &::after{
      content: '';
      width: 45px;
      height: 2px;
      position: absolute;
      bottom: -20%;
      left: 50%;
      transform: translateX(-50%);
      background: red
    }
  }
  .detail{
    background-color: rgb(247, 248, 250);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    h3{
      font-weight: 600;
    }
    p{
      span{
        cursor: pointer;
        color: rgb(9, 100, 236);
      }
    }
  }
  .huizong{
    display: flex;
    justify-content: space-between;
    padding: 20px;
    background-color: rgb(247, 248, 250);
    .allprice{
      display: flex;
      flex-direction: column;
      p{
        width: 200px;
        display: flex;
        justify-content: space-between;
        margin: 5px 0;
      }
      p:nth-child(1),:nth-child(2){
        font-size: 16px;
        font-weight: 500;
      }
      p:nth-child(3),:nth-child(4),:nth-child(5){
        font-size: 18px;
        font-weight: 600;
        .price{
          color: red;
        }
      }
      p:nth-child(6){
        font-size: 20px;
        font-weight: 800;
        .price{
          color: red;
          font-size: 20px;
          font-weight: 800;
        }
      }
    }
  }
  .btnclass{
    height: 70px;
    div{
      height: 50px;
      width: 100%;
      background-color: rgb(247, 248, 250);
      position: fixed;
      bottom: 0;
      right: 0;
      padding: 10px 20px;
      text-align: right;
    }
  }
}
</style>
